<template>
  <div id="app" :key="appKey" >

    <router-view/>

  </div>
</template>

<script>


export default {
  name: 'App',
    data(){
      return {
          appKey : 1
      }
    },
  components: {



  },
    mounted() {
      //页面开始加载时修改font-size
        var html = document.getElementsByTagName("html")[0];
        var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
        html.style.fontSize = oWidth/758 *100 +'px';
        console.log('rem:', html.style.fontSize);
    },

}
</script>

<style >
    @media screen and (max-width:768px){
        #app{
            font-size: 0.05rem;
        }
    }
    @media screen and (min-width:768px) and (max-width:1024px){
        #app{
            font-size :0.08rem
        }

    }

    @media screen and (min-width: 1024px){
        #app{
            font-size: 0.1rem;
        }
    }









</style>
